<template>
    <div>
        <van-cell :icon="icon" :required="option.editable && option.required" :title="option.title" is-link  :label="label" @click="showInput" />
        <van-popup v-model="show" position="bottom" v-if="show" >
            <van-datetime-picker
                    v-model="inputValue"
                    :type="type"
                    :title="option.title"
                    @confirm="confirm"
                    @cancel="cancel"
            />
        </van-popup>
    </div>
</template>

<script>
    export default {
        name: "date",
        props: ["option"],
        data(){
            return {
                value: this.init(),
                show: false,
                type:"",
                inputValue: null
            }
        },
        watch:{
            value(nv){
                this.option.value = this.label
            }
        },
        computed: {
            icon(){
                        if(this.option.editable){
                            return "edit";
                        } else {
                            return "";
                        }
            },
            label(){
                if(!this.value){
                    return ""
                }
                if (typeof this.value == "string"){
                    return this.value
                }
                switch (this.option.orgformat) {
                    case "日期":
                        return this.value.Format("yyyy-MM-dd")
                    case "日期+时间":
                        return this.value.Format("yyyy-MM-dd hh:mm:ss")
                    case "时间":
                        return this.value.Format("hh:mm:ss")
                }
            }
        },
        methods:{
            init(){
                return ""
            },
            showInput(){
                this.inputValue = this.value
                if(!this.inputValue){
                    this.inputValue = new Date()
                }
                switch (this.option.orgformat) {
                    case "日期":
                        this.type = "date"
                        break
                    case "日期+时间":
                        this.type = "datetime"
                        break
                    case "时间":
                        this.type = "time"
                        this.inputValue = this.inputValue.Format("hh:mm")
                        break
                }
                console.log(this.option)
                this.show = true
            },
            confirm(){
                console.log(this.inputValue)
                this.value = this.inputValue;
                this.show = false

                console.log(this.value)
                if(typeof this.value == "string"){
                    this.value = new Date(new Date().Format("yyyy-MM-dd ") + this.inputValue + ":00")
                }
            },
            cancel(){
                this.show = false
            }
        },
        mounted() {
            var val;
            function isValidDate(date) {
                return date instanceof Date && !isNaN(date.getTime())
            }
            if(this.option.value){
                switch (this.option.orgformat) {
                    case "日期":
                        val = new Date(this.option.value + " 00:00:00")
                        break
                    case "日期+时间":
                        val = new Date(this.option.value)
                        break
                    case "时间":
                        val = new Date(new Date().Format("yyyy-MM-dd ") + this.option.value)
                        break
                }
            }
            if(val && isValidDate(val)){
                this.value = val;
            }
        }
    }
</script>

<style scoped>
    .van-cell{
        text-align: left;
    }
</style>
